import React, { useState, useEffect } from 'react';
import { View, Text, Modal, StyleSheet, TouchableOpacity, ViewStyle, TextStyle, Platform } from 'react-native';
import { Picker } from '@react-native-picker/picker';

type TimePickerTheme = {
    background?: string;
    textColor?: string;
    accent?: string;
};

type TimePickerModalProps = {
    visible: boolean;
    initialHour?: number;
    initialMinute?: number;
    onConfirm: (hour: number, minute: number) => void;
    onCancel: () => void;
    theme?: TimePickerTheme;
};

const TimePickerModal: React.FC<TimePickerModalProps> = ({
    visible,
    initialHour = 22,
    initialMinute = 0,
    onConfirm,
    onCancel,
    theme = {},
}) => {
    const [hour, setHour] = useState<number>(initialHour);
    const [minute, setMinute] = useState<number>(initialMinute);

    useEffect(() => {
        setHour(initialHour);
        setMinute(initialMinute);
    }, [initialHour, initialMinute]);

    const bgColor = theme.background || '#fff';
    const textColor = theme.textColor || '#333';
    const accentColor = theme.accent || '#007AFF';

    return (
        <Modal visible={visible} transparent animationType="slide">
            <View style={styles.overlay}>
                <View style={[styles.container, { backgroundColor: bgColor }]}>
                    <Text style={[styles.title, { color: textColor }]}>选择时间</Text>
                    <View style={styles.pickerRow}>
                        <Picker
                            selectedValue={hour}
                            onValueChange={(value: number) => setHour(value)}
                            style={styles.picker}
                            itemStyle={{ color: textColor } as TextStyle}>
                            {Array.from({ length: 24 }, (_, i) => (
                                <Picker.Item key={i} label={`${i} 时`} value={i} />
                            ))}
                        </Picker>
                        <Picker
                            selectedValue={minute}
                            onValueChange={(value: number) => setMinute(value)}
                            style={styles.picker}
                            itemStyle={{ color: textColor } as TextStyle}>
                            {Array.from({ length: 60 }, (_, i) => (
                                <Picker.Item key={i} label={`${i} 分`} value={i} />
                            ))}
                        </Picker>
                    </View>
                    <View style={styles.buttonRow}>
                        <TouchableOpacity onPress={onCancel}>
                            <Text style={[styles.cancel, { color: textColor }]}>取消</Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => onConfirm(hour, minute)}>
                            <Text style={[styles.confirm, { color: accentColor }]}>确定</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        </Modal>
    );
};

export default TimePickerModal;

const styles = StyleSheet.create({
    overlay: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.4)',
    } as ViewStyle,
    container: {
        borderTopLeftRadius: 16,
        borderTopRightRadius: 16,
        padding: 20,
        paddingBottom: Platform.OS === 'ios' ? 40 : 20,
    } as ViewStyle,
    title: {
        fontSize: 18,
        textAlign: 'center',
        marginBottom: 12,
        fontWeight: '600',
    } as TextStyle,
    pickerRow: {
        flexDirection: 'row',
        justifyContent: 'space-around',
    } as ViewStyle,
    picker: {
        width: 120,
        height: 180,
    },
    buttonRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 16,
    } as ViewStyle,
    cancel: {
        fontSize: 16,
    } as TextStyle,
    confirm: {
        fontSize: 16,
        fontWeight: 'bold',
    } as TextStyle,
});
